<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的基本代码</title>
</head>
<body>

<div id="app">
    <!--给全选按钮绑定v-mode变量，值为true时就是选中状态，绑定点击事件，执行全选和反选操作-->
    <input type='checkbox' class='input-checkbox' v-model='checked' @click='checkedAll'>全选
    <div v-for='checkb in checkboxData' :key="checkb.id">
        <!--给每个复选按钮绑定同一个v-mode数组变量，数组里面有相应的value就被选中-->
        <input type='checkbox' name='checkboxinput' class='input-checkbox' v-model='checkboxList' :value="checkb.id">{{checkb.value}}
    </div>
</div>


<script src="../lib/vue-2.4.0.js"></script>
<script>

    var vue = new Vue({
        el: '#app',
        data: {
            checkboxData:[
                {
                    id:'1',
                    value:'苹果'
                },
                {
                    id:'2',
                    value:'荔枝'
                },
                {
                    id:'3',
                    value:'香蕉'
                },
                {
                    id:'4',
                    value:'火龙果'
                }
            ],
            checkboxList:[],
            checked: false
        },
        methods:{
            checkedAll () {
                console.log(this.checked)
                if (this.checked) {//实现全选
                    this.checkboxList = [];
                    this.checkboxData.forEach( (item) => {
                      this.checkboxList.push(item.id);
                      console.log(this.checkboxList)
                    });
                } else { //实现反选
                    this.checkboxList = [];
                }
            }
        },
        watch: { //深度 watcher
            checkboxList: {
                handler: function (val, oldVal) {
                    if (this.checkboxList.length === this.checkboxData.length) {
                        this.checked=true;
                    } else {
                        this.checked=false;
                    }
                },
                deep: true
            }
        }
    })
</script>
</body>
</html>
